<!-- 弹窗 详情 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";

import { whManagerBsTbEvaluateReportSaveOrUpdateUsingPost } from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";
import { useCompanyStore } from "@/stores/company";
import { injectState } from "../state";

const { page } = injectState()!;

defineOptions({ name: "DetailDialog" });

const companyStore = useCompanyStore();

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formRef = shallowRef<FormInstance>();

const dialogType = ref<"add" | "edit" | "detail" | string>();

const titleMap: Record<string, string> = {
	add: "新增",
	edit: "编辑",
	detail: "详情",
};

const beforeClose = async () => {
	if (dialogType.value !== "detail") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (type = "add", value = {} as any) => {
	dialogType.value = type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<Record<string, any>>({});

const rules: FormRules<typeof model.value> = {
	reportCode: { required: true, message: "报告编号不可为空", trigger: "blur" },
	projectName: { required: true, message: "项目名称不可为空", trigger: "blur" },
	evaluateTime: {
		required: true,
		message: "评估时间不可为空",
		trigger: "blur",
	},
	dangerLevel: {
		required: true,
		message: "危险源等级不可为空",
		trigger: "blur",
	},
	reportType: { required: true, message: "报告类型不可为空", trigger: "blur" },
};

const { execute, isLoading } = useAsync(async () => {
	await formRef.value?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});
	await whManagerBsTbEvaluateReportSaveOrUpdateUsingPost({
		data: {
			...model.value,
			enterpriseId: companyStore.currentCompanyId,
		},
	});
	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
});

const dangerOptions = [
	{
		value: "一级",
		label: 1,
	},
	{
		value: "二级",
		label: 2,
	},
	{
		value: "三级",
		label: 3,
	},
	{
		value: "四级",
		label: 4,
	},
	{
		value: "非常重大",
		label: 0,
	},
];

const reportOptions = [
	{
		value: "定性评估报告",
		label: 1,
	},
	{
		value: "定量评估报告",
		label: 2,
	},
	{
		value: "综合评估报告",
		label: 3,
	},
	{
		value: "定期评估报告",
		label: 4,
	},
	{
		value: "专项评估报告",
		label: 5,
	},
];
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="titleMap[dialogType!]"
		:before-close="beforeClose"
		max-h="884px!"
		w="707px!"
	>
		<el-scrollbar>
			<el-form
				ref="formRef"
				:disabled="dialogType === 'detail'"
				:model="model"
				:rules="rules"
				class="gap-x-55px grid! grid-cols-2!"
				label-position="top"
			>
				<el-col>
					<el-form-item
						class="grid-col-span-2!"
						label="报告编号"
						prop="报告编号"
						label-width="auto"
						style="max-width: 250px"
					>
						<el-input v-model="model['reportCode']" placeholder="请输入" />
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item
						class="grid-col-span-2!"
						label="项目名称"
						prop="项目名称"
						label-width="auto"
						style="max-width: 250px"
					>
						<el-input v-model="model['projectName']" placeholder="请输入" />
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item
						class="grid-col-span-2!"
						label="评估单位"
						prop="evaluateUnit"
						label-width="auto"
						style="max-width: 250px"
					>
						<el-input v-model="model['evaluateUnit']" placeholder="请输入" />
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item
						class="grid-col-span-2!"
						label="评估时间"
						prop="evaluateTime"
						label-width="auto"
						style="max-width: 250px"
					>
						<!-- <el-input v-model="model['评估时间']" placeholder="请输入" /> -->
						<el-date-picker
							v-model="model['evaluateTime']"
							type="date"
							placeholder="请选择"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item
						class="grid-col-span-2!"
						label="危险源等级"
						prop="危险源等级"
						label-width="auto"
						style="max-width: 250px"
					>
						<!-- <el-input v-model="model['企业名称']" placeholder="请输入企业名称" /> -->
						<el-select
							v-model="model['dangerLevel']"
							placeholder="请选择"
							size="large"
							style="width: 240px"
						>
							<el-option
								v-for="item in dangerOptions"
								:key="item.value"
								:label="item.value"
								:value="item.label"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item
						class="grid-col-span-2!"
						label="报告类型"
						prop="报告类型"
						label-width="auto"
						style="max-width: 250spx"
					>
						<!-- <el-input v-model="model['企业名称']" placeholder="请输入企业名称" /> -->
						<el-select
							v-model="model['reportType']"
							placeholder="请选择"
							size="large"
							style="width: 240px"
						>
							<el-option
								v-for="item in reportOptions"
								:key="item.label"
								:label="item.value"
								:value="item.label"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<template v-if="dialogType === 'detail'">
					<el-form-item
						class="grid-col-span-2!"
						label="评审结果"
						prop="评审结果"
						label-width="auto"
						style="max-width: 500px"
					>
						<!-- <el-input v-model="model['企业名称']" placeholder="请输入企业名称" /> -->
						<el-input
							type="textarea"
							v-model="model['reviewComments']"
						></el-input>
					</el-form-item>
				</template>

				<!-- <el-button type="primary" :is-loading="isLoading" style="width: 60px"
					>添加附件</el-button
				> -->
				<el-form-item class="grid-col-span-2!" label="附件名称" prop="附件名称">
					<!-- <el-input v-model="model['附件名称']" placeholder="请输入" /> -->
					<FileUpload />
				</el-form-item>
			</el-form>
		</el-scrollbar>
		<template v-if="dialogType !== 'detail'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确认</el-button
			>
		</template>
	</PromiseDialog>
</template>
